<template>
  <div id="app" style="font-size: 26px; font-weght: bold; margin: 30px 0">
    <header class="header">
      <el-input
        placeholder=""
        v-for="(item, index) in topInputList"
        :key="index"
        v-model="item.text"
        :placeholder="item.title"
        class="top-input"
      ></el-input>
      <el-button type="primary" icon="el-icon-search" @click="search"
        >搜索</el-button
      >
    </header>
    <div class="body">
      <el-table
        v-loading="loading"
        :data="tableData"
        max-height="600"
        border
        fit
      >
        <el-table-column
          show-overflow-tooltip
          prop="user_id"
          label="用户ID"
          width="80"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="name"
          label="姓名"
          width="80"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="phone_number"
          label="用户手机号"
          width="100"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="is_baiben"
          label="时段"
          width="100"
        >
          <template slot-scope="scope">
            {{ scope.row.is_baiben == 1 ? "白班" : "夜班" }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="position_name"
          label="申请职位"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="img"
          label="头像"
          width="100"
        >
          <template slot-scope="scope">
            <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.imgList[2]"
              :preview-src-list="scope.row.imgList"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="身份证照片">
          <template slot-scope="scope">
            <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.imgList[0]"
              :preview-src-list="scope.row.imgList"
              fit="cover"
            ></el-image>
            <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.imgList[1]"
              :preview-src-list="scope.row.imgList"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="is_status_text"
          label="状态"
        >
        </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip width="100">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="编辑"
      :visible.sync="outerVisible"
      :before-close="handleClosediaLoding"
    >
      <el-descriptions title="" :column="2" class="asdasd">
        <el-descriptions-item label="姓名">{{
          fromData.name
        }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{
          fromData.phone_number
        }}</el-descriptions-item>
        <el-descriptions-item label="申请职位">{{
          fromData.position_name
        }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{
          fromData.is_status_text
        }}</el-descriptions-item>
        <el-descriptions-item label="技能" :span="2">
          <el-input v-model="fromData.user_skill" style="width: 45%"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="身份证照片" :span="2">
          <el-image
            v-if="fromData.imgList"
            style="width: 100px; height: 100px; margin: 0 10px"
            :src="fromData.imgList[0]"
            :preview-src-list="fromData.imgList"
            fit="cover"
          ></el-image>
          <el-image
            v-if="fromData.imgList"
            style="width: 100px; height: 100px; margin: 0 10px"
            :src="fromData.imgList[1]"
            :preview-src-list="fromData.imgList"
            fit="cover"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="头像" :span="2">
          <el-image
            v-if="fromData.imgList"
            style="width: 100px; height: 100px; margin: 0 10px"
            :src="fromData.imgList[2]"
            :preview-src-list="fromData.imgList"
            fit="cover"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item
          label="类型"
          :span="2"
          v-if="fromData.authority_id == 3"
        >
          <el-dropdown trigger="click" @command="chooseTypes">
            <el-button @click="selectDropdown">
              {{ toolTypes[dropdownTypesList].name
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(item, index) in toolTypes"
                :key="index"
                :command="index"
                >{{ item.name }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-descriptions-item>
        <el-descriptions-item label="审核结果" :span="2">
          <el-radio v-model="fromData.is_status" :label="1">通过</el-radio>
          <el-radio v-model="fromData.is_status" :label="2">拒绝</el-radio>
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeVisible">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </div>
    </el-dialog>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40, 50, 60]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { employeeList, saveEmployee } from "../../../utils/api";
export default {
  name: "employee",
  data() {
    return {
      token: sessionStorage.getItem("token"),
      topInputList: [{ title: "姓名", text: "" }],
      imgHeader: this.Global.imgHeader,

      tableData: [],
      currentPage: 1,
      total: 0,
      limit: 10,
      loading: true,
      outerVisible: false,
      fromData: {},
      user_kill: "",
      toolTypes: [
        { name: "水", type: 0 },
        { name: "木", type: 1 },
        { name: "油", type: 2 },
        { name: "瓦", type: 3 },
        { name: "电", type: 4 },
      ],
      dropdownTypesList: 0,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    chooseTypes(command) {
      this.dropdownTypesList = command;
    },
    selectDropdown() {},
    handleClosediaLoding() {
      this.outerVisible = false;
    },
    closeVisible() {
      this.outerVisible = false;
    },
    save() {
      this.outerVisible = false;

      this.saveEmployee(
        this.token,
        this.fromData.id,
        this.fromData.is_status,
        this.user_kill,
        this.dropdownTypesList
      );
    },
    handleEdit(index, row) {
      this.fromData = JSON.parse(JSON.stringify(row));
      this.outerVisible = true;
      console.log(this.fromData);
      this.dropdownTypesList = this.fromData.names;
    },
    search() {
      this.employeeList(
        this.token,
        this.currentPage,
        this.limit,
        this.topInputList[0].text
      );
    },
    handleSizeChange(val) {
      this.limit = val;
      // console.log(`每页 ${val} 条`);
      this.employeeList(
        this.token,
        this.currentPage,
        this.limit,
        this.topInputList[0].text
      );
    },
    // 第几页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.employeeList(
        this.token,
        this.currentPage,
        this.limit,
        this.topInputList[0].text
      );
    },
    // 获取用户信息
    employeeList(token, page, limit, name) {
      this.loading = true;
      employeeList(token, page, limit, name)
        .then((res) => {
          console.log(res.data);
          if (res.data.status) {
            this.tableData = res.data.data.data;
            this.total = res.data.data.count;
            // console.log(this.tableData)
            this.tableData.forEach((item) => {
              // '申请状态 0未审核 1申请成功 2未通过',
              if (item.is_status == 0) {
                item.is_status_text = "未审核";
              }
              if (item.is_status == 1) {
                item.is_status_text = "通过";
              }
              if (item.is_status == 2) {
                item.is_status_text = "拒绝";
              }
              item.img1 = this.imgHeader + item.identity_img1;
              item.img2 = this.imgHeader + item.identity_img2;
              item.img3 = this.imgHeader + item.img;
              item.imgList = [item.img1, item.img2, item.img3];
              console.log(item.img1);
            });
            let timer = setTimeout(() => {
              this.loading = false;
              clearTimeout(timer);
            }, 400);
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/login");
            }
            let timer = setTimeout(() => {
              this.$message.error("错误，请刷新");
              this.loading = false;
              clearTimeout(timer);
            }, 5000);
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
          let timer = setTimeout(() => {
            this.loading = false;
            this.$message.error("错误，请刷新");
            clearTimeout(timer);
          }, 400);
        });
    },
    // 保存员工信息
    saveEmployee(token, id, status, user_skill, names) {
      saveEmployee(token, id, status, user_skill, names)
        .then((res) => {
          console.log(res);
          if (res.data.status) {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.employeeList(
              this.token,
              this.currentPage,
              this.limit,
              this.topInputList[0].text
            );
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          this.$message.error("操作失败");
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.employeeList(
      this.token,
      this.currentPage,
      this.limit,
      this.topInputList[0].text
    );
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped>
#app {
  width: 100%;
}
/deep/.header {
  background: white !important;
  box-shadow: 0 5px 10px #ddd;
  min-height: 40px;
  display: flex;
  padding: 10px;
}
.top-input {
  width: 150px;
  margin-right: 20px;
}
/deep/.el-table th.el-table__cell > .cell {
  text-align: center;
}
/deep/.el-table--border .el-table__cell:first-child .cell {
  text-align: center;
}
/deep/.el-table .cell.el-tooltip {
  text-align: center;
}
.body {
  margin: 20px 0;
}
/deep/.el-descriptions .el-descriptions-item__container {
  align-items: center;
}
</style>
